<template>
  <div>
    <div style="margin-bottom: 10px;">
      <el-button type="primary" size="mini" @click="handleTerminalHook">挂表</el-button>
    </div>

    <div>
      <el-table :data="tableData" border size="mini" style="width: 100%">
        <el-table-column prop="terminalName" label="设备名称"></el-table-column>
        <el-table-column prop="terminalId" label="用户编号"></el-table-column>
        <el-table-column prop="easIonId" label="设备编号"></el-table-column>
        <el-table-column prop="usedName" width="100" align="center" label="设备用途"></el-table-column>
        <el-table-column prop="terminalInstallAddr" label="安装地址"></el-table-column>
        <el-table-column prop="lng" label="经度"></el-table-column>
        <el-table-column prop="lat" label="纬度"></el-table-column>
        <el-table-column label="操作" width="80" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['region:zone:remove']"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog :title="title" :visible.sync="open" width="600px" :close-on-click-modal="false"
               append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="140px">
        <el-form-item label="分区编号" prop="areaID">
          <el-input v-model="form.areaID" placeholder="请输入分区编号" readonly style="width: 100%;"/>
        </el-form-item>
        <el-form-item label="分区名称" prop="areaName">
          <el-input v-model="form.areaName" placeholder="请输入分区名称" readonly style="width: 100%;"/>
        </el-form-item>
        <el-form-item label="设备用途" prop="used">
          <el-select v-model="form.used" placeholder="请输入设备用途" style="width: 100%;"
                     @change="handleTerminalUsedChanged">
            <el-option label="流量计" value="1"></el-option>
            <el-option label="压力计" value="2"></el-option>
            <el-option label="出水表" value="3"></el-option>
            <el-option label="进水表" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备名称" prop="terminalName">
          <el-input v-model="form.terminalName" placeholder="请输入设备名称" style="width: 100%;">
            <el-button slot="append" @click="handleChooseTerminalClick">选择设备</el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="用户编号" prop="terminalID">
          <el-input v-model="form.terminalID" placeholder="请输入设备编号" readonly style="width: 100%;"/>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <UnbindTerminalSelector ref="refUnbindTerminalSelector" :callback="handleTerminalSelected"/>
  </div>
</template>

<script>
import UnbindTerminalSelector from './UnbindTerminalSelector'
import {addZoneJoin, getZoneJoinTerminals, delZoneJoin} from "@/api/leakage/zoneJoin";

export default {
  name: "TerminalHooking",
  components: {
    UnbindTerminalSelector
  },
  data() {
    return {
      editingZoneObj: undefined,
      title: '设备挂接',
      open: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        areaID: [
          {required: true, message: "分区编号不能为空"}
        ],
        areaName: [
          {required: true, message: "分区名称不能为空"}
        ],
        used: [
          {required: true, message: "设备用途不能为空"}
        ],
        terminalName: [
          {required: true, message: "设备名称不能为空"}
        ],
        terminalID: [
          {required: true, message: "设备编号不能为空"}
        ],
      },
      tableData: []
    }
  },
  methods: {
    updateEditingZone(zone) {
      this.editingZoneObj = zone
      this.form.tenantId = zone.tenantId
      this.form.areaID = zone.areaId
      this.form.areaName = zone.areaName
      this.loadTerminalHookedData()
    },
    handleTerminalHook() {
      if (this.editingZoneObj == undefined) {
        this.$message.error('请先在左侧区域树选择分区')
      } else {
        this.reset();
        this.open = true
        this.$nextTick(() => this.$refs.form.clearValidate())
      }
    },
    handleTerminalUsedChanged(val) {
      this.form.used = val
      this.$forceUpdate()
      this.form = {...this.form}
    },
    handleChooseTerminalClick() {
      if (!this.form.used) {
        this.$message.error('请先选择设备用途')
      } else {
        this.$refs.refUnbindTerminalSelector.openDialog(this.editingZoneObj, this.form.used)
      }
    },
    handleTerminalSelected(terminal) {
      this.form.terminalID = terminal.terminalID
      this.form.terminalName = terminal.terminalName
      this.$forceUpdate()
      this.form = {...this.form}
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          addZoneJoin(this.form).then(response => {
            this.$modal.msgSuccess("新增成功");
            this.open = false;
            this.loadTerminalHookedData();
          });
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const IDs = row.id || this.ids;
      this.$modal.confirm('是否确认删除此挂接设备？').then(function () {
        return delZoneJoin(IDs);
      }).then(() => {
        this.loadTerminalHookedData();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    // 表单重置
    reset() {
      this.form.terminalID = null
      this.form.terminalName = null
      this.form.used = null
    },
    loadTerminalHookedData() {
      getZoneJoinTerminals({areaId: this.editingZoneObj.areaId, terminalMark: 1}).then(res => {
        this.tableData = res.rows
      })
    }
  }
}
</script>

<style scoped>

</style>
